@layer theme, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
#app {
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
  }
}

.window-title-bar-button {
  @apply flex items-center justify-center w-9 h-7 hover:bg-gray-200 dark:text-white dark:hover:bg-stone-700 cursor-pointer;
  app-region: no-drag;
}
.window-title-bar-button-close {
  @apply flex items-center justify-center w-9 h-7 hover:bg-red-500 hover:text-white dark:hover:bg-red-600 cursor-pointer;
  app-region: no-drag;
}
.window-file-button {
  @apply absolute top-[50%] mt-[-20px] w-10 h-10 rounded-full flex items-center justify-center bg-stone-200 hover:bg-stone-400 dark:bg-stone-700 dark:hover:bg-stone-400 z-[9999] cursor-pointer;
}